<template>
  <div class="app-main-container">
    <a-layout>
      <!-- 主应用头部 -->
      <a-layout-header class="main-header">
        <div class="header-content">
          <div class="logo">
            <span>tds-app-main</span>
            <a-tag color="red" style="margin-left: 8px;">主应用</a-tag>
          </div>
          
          <a-menu
            v-model:selectedKeys="selectedKeys"
            theme="dark"
            mode="horizontal"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="home">
              <router-link to="/">
                <HomeOutlined />
                首页
              </router-link>
            </a-menu-item>
            <a-menu-item key="subapp">
              <router-link to="/exp">
                <AppstoreOutlined />
                子应用
              </router-link>
            </a-menu-item>
            <a-menu-item key="about">
              <router-link to="/about">
                <InfoCircleOutlined />
                关于
              </router-link>
            </a-menu-item>
          </a-menu>
        </div>
      </a-layout-header>
      
      <!-- 主应用内容区域 -->
      <a-layout-content class="main-content">
        <!-- 路由视图 -->
        <router-view />
        
        <!-- 子应用容器 -->
        <!-- <div id="tdsec-container" class="sub-app-container"></div> -->
      </a-layout-content>
      
      <!-- 主应用底部 -->
      <a-layout-footer class="main-footer">
        tds-app-main ©2024 Created by Vue3 + Vite + qiankun
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup>


const route = useRoute()

// 响应式数据
const selectedKeys = ref(['home'])

// 监听路由变化，更新选中的菜单项
watch(() => route.path, (newPath) => {
  if (newPath === '/') {
    selectedKeys.value = ['home']
  } else if (newPath === '/exp') {
    selectedKeys.value = ['subapp']
  } else if (newPath === '/about') {
    selectedKeys.value = ['about']
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.app-main-container {
  min-height: 100vh;
  
  .main-header {
    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      
      .logo {
        color: white;
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      
      .ant-menu {
        flex: 1;
        justify-content: center;
      }
    }
  }
  
  .main-content {
    min-height: calc(100vh - 64px - 70px);
    background: #f0f2f5;
    padding: 24px;
    
    .sub-app-container {
      margin-top: 16px;
      min-height: 400px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
  
  .main-footer {
    text-align: center;
    background: #f0f2f5;
    padding: 16px 24px;
  }
}

// 确保在微应用模式下样式正确
:deep(.ant-layout) {
  background: #f0f2f5;
}
</style>